<template>
  <div>
    <mt-header fixed title="添加收货地址">
      <router-link to="/member" slot="left">
        <mt-button icon="back"></mt-button>
      </router-link>
      <mt-button slot="right">
        <router-link to="/search">搜索</router-link>
      </mt-button>
    </mt-header>
    <mt-tabbar class="footer" fixed>
      <mt-tab-item id="index">
        <img src="../assets/icon.png" slot="icon">
        <router-link to="/">首页</router-link>
      </mt-tab-item>
      <mt-tab-item id="sort">
        <img src="../assets/icon.png" slot="icon">
        <router-link to="/sort">分类</router-link>
      </mt-tab-item>
      <mt-tab-item id="shoppingCar">
        <img src="../assets/icon.png" slot="icon">
        <router-link to="/shoppingCar">购物车</router-link>
      </mt-tab-item>
      <mt-tab-item id="member">
        <img src="../assets/icon.png" slot="icon">
        <router-link to="/member">会员中心</router-link>
      </mt-tab-item>
    </mt-tabbar>
    <div class="text">
      <mt-field placeholder="收货人" v-model="add.people"></mt-field>
      <mt-field placeholder="邮编" v-model="add.postalcode"></mt-field>
      <mt-field placeholder="省市区" v-model="add.address"></mt-field>
      <mt-field rows="4" placeholder="详细地址" type="textarea" v-model="add.detailed"></mt-field>
      <mt-button size="large" type="primary" @click="save">保存</mt-button>
    </div>
  </div>
</template>

<script>
import { Toast } from 'mint-ui'
export default {

  data () {
    return {
      add: {
        people: '',
        postalcode: '',
        address: '',
        detailed: ''
      }
    }
  },

  methods: {
    save () {
      if (!this.add.people.trim()) {
        Toast({
          message: '请填写收货人',
          position: 'middle',
          duration: 2000
        })
        return false
      }
      if (!this.add.postalcode.trim()) {
        Toast({
          message: '请填写邮编',
          position: 'middle',
          duration: 2000
        })
        return false
      }
      if (!this.add.address.trim()) {
        Toast({
          message: '请填写省市区',
          position: 'middle',
          duration: 2000
        })
        return false
      }
      if (!this.add.detailed.trim()) {
        Toast({
          message: '请填写详细地址',
          position: 'middle',
          duration: 2000
        })
        return false
      }
      let addressData = JSON.parse(localStorage.getItem('addressData')) || []
      addressData.push(this.add)
      localStorage.setItem('addressData', JSON.stringify(addressData))
      Toast({
        message: '添加成功',
        position: 'middle',
        duration: 2000
      })
      this.$router.push({name: 'myaddress'})
    }
  },

  created () {
  }
}
</script>

<style lang='less'>
* {
  margin: 0;
  padding: 0;
}
.footer a,
.mint-header a {
  color: white;
  text-decoration: none;
}
.mint-tabbar {
  background-color: #0094ff;
}
.text {
  margin-top: 40 / 16rem;
  button{
    width: 90%;
    margin: 0 auto;
  }
}
.mint-field input {
  border:none;
}
</style>
